<template>
  <div class="card flex-col">
    <div class="card-title">
      账单数量/月 <i>{{ cardData.totalNum }}</i>
    </div>
    <!-- <div class="card-count"></div> -->
    <!-- <div class="card-percent">占房产数量的 {{ percentStr }}</div> -->
    <pie-chart title="账单数量" :chart-data="peiData" />
    <!-- <div class="card-detail">查看详情 <i class="el-icon-arrow-right" /></div> -->
  </div>
</template>

<script>
import PieChart from './PieChart'
import { billNum } from '@/api/dashboard'
export default {
  components: { PieChart },
  props: {},
  data() {
    return {
      peiData: [],
      // cardData: {
      //   onSale: {
      //     value: 500,
      //     name: "已上传",
      //   },
      //   sold: {
      //     value: 2000,
      //     name: "待上传",
      //   },
      // },
      cardData: {}
    }
  },
  // computed: {
  //   percentStr() {
  //     const percent =
  //       (this.cardData.onSale.value /
  //         (this.cardData.sold.value + this.cardData.onSale.value)) *
  //       100;
  //     return `${percent}%`;
  //   },
  // },
  mounted() {
    this.getAccontNum()
  },
  methods: {
    // 账单数量
    async getAccontNum() {
      var res = await billNum()
      if (res.code === 200) {
        this.cardData = res.data
        // var list = Object.keys(this.cardData).map((item) => {
        //   return {
        //     name: item,
        //     value: this.cardData[item]
        //   }
        // })
        // this.peiData = list
      }
    }
  }
}
</script>
<style lang="scss">
.card-table {
  & thead {
    color: #010101;
  }
}
</style>

<style lang="scss" scoped>
i {
  font-style: normal;
}
.card {
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid rgba(221, 221, 221, 100);
  min-height: 240px;
}

.card-title {
  color: #414141;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-count {
  margin-top: 27px;
  color: #414141;
  font-size: 36px;
  font-weight: bold;
}

.card-percent {
  margin: 10px auto 0;
  color: #414141;
  font-size: 16px;
}

.card-detail {
  margin-top: auto;
  font-size: 14px;
  color: #5ac6b7;
  text-align: right;
}
</style>
